<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 当前激活的导航项
const activeNav = ref('home')

// 搜索关键词
const searchKeyword = ref('')

// 处理导航点击
const handleNavClick = (navType: string) => {
  activeNav.value = navType
  if (navType === 'home') {
    router.push('/layout')
  } else if (navType === 'account') {
    router.push('/account')
  }
}

// 处理搜索
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    // 这里可以添加搜索逻辑
    console.log('搜索关键词:', searchKeyword.value)
  }
}

// 根据当前路由设置激活导航
const syncActiveNavWithRoute = (path: string) => {
  if (path.startsWith('/account')) {
    activeNav.value = 'account'
  } else {
    activeNav.value = 'home'
  }
}

watch(
  () => route.path,
  (newPath) => {
    syncActiveNavWithRoute(newPath)
  },
  { immediate: true }
)
</script>

<template>
  <div class="bkd-header">
    <!-- 左侧标题 -->
    <div class="header-left">
      <h1 class="main-title">宝可得</h1>
    </div>
    
    <!-- 中间导航 -->
    <div class="header-nav">
      <div 
        class="nav-item"
        :class="{ active: activeNav === 'home' }"
        @click="handleNavClick('home')"
      >
        <span>首页</span>
        <div v-if="activeNav === 'home'" class="active-indicator"></div>
      </div>
      
      <div 
        class="nav-item dropdown"
        :class="{ active: activeNav === 'account' }"
        @click="handleNavClick('account')"
      >
        <span>账号设置</span>
        <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
      </div>
    </div>
    
    <!-- 右侧搜索框 -->
    <div class="header-search">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入搜索内容"
        class="search-input"
        @keyup.enter="handleSearch"
      />
      <el-button 
        type="primary" 
        class="search-button"
        @click="handleSearch"
      >
        搜索
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bkd-header {
  width: 100%;
  height: 3rem;
  background: linear-gradient(to right, #ff6a00, #ee5530);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  box-sizing: border-box;
  box-shadow: 0 0.125rem 0.5rem rgba(255, 106, 0, 0.3);
  position: relative;
  z-index: 10; /* 降低层级，避免遮挡顶部用户名下拉 */
  border-bottom: 0.125rem solid #fff;
}

.header-left {
  .main-title {
    color: white;
    font-size: 1.125rem;
    font-weight: bold;
    margin: 0;
    font-family: 'Microsoft YaHei', sans-serif;
    text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease;
    
    &:hover {
      transform: scale(1.05);
    }
  }
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  
  .nav-item {
    color: white;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
      transform: translateY(-0.0625rem);
    }
    
    &.active {
      background-color: rgba(255, 255, 255, 0.2);
      font-weight: 600;
    }
    
    .active-indicator {
      position: absolute;
      bottom: -0.5rem;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 0.3125rem solid transparent;
      border-right: 0.3125rem solid transparent;
      border-bottom: 0.5rem solid #ffffff;
    }
    
    .dropdown-icon {
      font-size: 0.6875rem;
      color: white;
      transition: transform 0.3s ease;
    }
    
    &.dropdown:hover .dropdown-icon {
      transform: rotate(180deg);
    }
  }
}

.header-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  
  .search-input {
    width: 12rem;
    
    :deep(.el-input__wrapper) {
      background-color: white;
      border: 0.0625rem solid #e0e0e0;
      border-radius: 0.25rem;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #ff6a00;
        box-shadow: 0 0.0625rem 0.25rem rgba(255, 106, 0, 0.2);
      }
      
      &.is-focus {
        border-color: #ff6a00;
        box-shadow: 0 0 0 0.0625rem rgba(255, 106, 0, 0.3);
      }
    }
    
    :deep(.el-input__inner) {
      height: 1.75rem;
      font-size: 0.8125rem;
      
      &::placeholder {
        color: #999;
      }
    }
  }
  
  .search-button {
    height: 1.75rem;
    background-color: #f5f5f5;
    border-color: #e0e0e0;
    color: #666;
    font-size: 0.8125rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    
    &:hover {
      background-color: #ff6a00;
      border-color: #ff6a00;
      color: white;
      transform: translateY(-0.0625rem);
      box-shadow: 0 0.125rem 0.5rem rgba(255, 106, 0, 0.3);
    }
    
    &:active {
      background-color: #e55a00;
      border-color: #e55a00;
      transform: translateY(0);
    }
  }
}

/* 响应式设计 */
@media (max-width: 75rem) {
  .bkd-header {
    padding: 0 0.75rem;
  }
  
  .header-left .main-title {
    font-size: 1rem;
  }
  
  .header-nav {
    gap: 1rem;
    
    .nav-item {
      font-size: 0.75rem;
      padding: 0.25rem 0.5rem;
    }
  }
  
  .header-search .search-input {
    width: 10rem;
  }
}

@media (max-width: 62.5rem) {
  .bkd-header {
    padding: 0 0.5rem;
    height: 2.5rem;
  }
  
  .header-left .main-title {
    font-size: 0.875rem;
  }
  
  .header-nav {
    gap: 0.75rem;
    
    .nav-item {
      font-size: 0.6875rem;
      padding: 0.1875rem 0.375rem;
    }
  }
  
  .header-search {
    .search-input {
      width: 8rem;
    }
    
    .search-button {
      height: 1.5rem;
      font-size: 0.75rem;
    }
  }
}

@media (max-width: 37.5rem) {
  .bkd-header {
    padding: 0 0.5rem;
    height: 2.25rem;
    
    .header-left .main-title {
      font-size: 0.8125rem;
    }
    
    .header-nav .nav-item {
      font-size: 0.625rem;
      padding: 0.1875rem 0.375rem;
      gap: 0.25rem;
    }
    
    .header-search {
      .search-input {
        width: 6rem;
        
        :deep(.el-input__inner) {
          height: 1.5rem;
          font-size: 0.75rem;
        }
      }
      
      .search-button {
        font-size: 0.6875rem;
        height: 1.5rem;
      }
    }
  }
}
</style>
